<template>
  <div class="home">
    <!-- 一级分类标题 -->
    <type-one></type-one>
    <!-- 主页上的轮播图组件 -->
    <my-banner></my-banner>
    <!-- 主页商品列表组件 -->
    <good-list :list="goodsData"></good-list>
    <!-- 底部的加载提示 -->
    <div class="loading">{{loadMsg}}</div>
  </div>
</template>

<script>
  import typeOne from "@/components/OneType";
  import myBanner from "@/components/Banner";
  import goodList from "@/components/GoodList";
  import { getGoodList } from "@/tools/ajax"
  export default {
    name: 'Home',
    components: {
      myBanner,
      typeOne,
      goodList
    },
    data() {
      return {
        page: 0, // 当前请求商品数据页码
        goodsData: [],  // 商品数据列表
        loading: false,  //当前是否正在加载数据
        loadMsg: "正在加载中..."
      };
    },
    created() {
      // 初始化时请求第一页商品
      this.getPageDate()
      // 初始化开始滚动监听
      this.bindScroll();
    },
    methods: {
      // 绑定滚动监听
      bindScroll() {
        // 对window添加滚动监听
        window.addEventListener("scroll", this.scrollHandle);
        // 如果添加事件监听时,事件函数有调用bind(), 则不能正常解除事件绑定
        // window.addEventListener("scroll", this.scrollHandle.bind(this));
      },
      // 解除滚动监听
      clearScroll() {
        console.log("解除监听")
        // 对window解除滚动监听
        window.removeEventListener("scroll", this.scrollHandle);
      },
      // 滚动监听函数
      scrollHandle() {
        // console.log("滚动",this)
        // 如果正在加载数据,返回,不再监听,  实现限流 
        if (this.loading) return;
        // 获取网页的总高度
        var B = document.body.scrollHeight ||
          document.documentElement.scrollHeight;
        // 获取窗口显示高度
        var H = window.innerHeight;
        // 获取网页滚动距离
        var S =
          document.body.scrollTop ||
          document.documentElement.scrollTop;
        // 网页总高 - 窗口高 - 滚动距离 < 10 说明滚动到底了
        if (B - H - S < 10) {
          console.log("触底")
          // 加载新一页数据
          this.getPageDate();
        }
      },
      // 请求商品数据函数
      getPageDate() {
        // 先增加页码
        this.page++;
        console.log("请求商品数据")
        // 标记当前开始加载
        this.loading = true;
        // 加载新一页数据
        getGoodList({ page: this.page }).then(data => {
          // 请求完成后,标记加载完成
          console.log(data)
          this.loading = false;
          if (data.length > 0) {
            this.goodsData.push(...data)
          } else {
            this.msg = "我是有底线的"
          }
        })
      }
    },
    destroyed() {
      // 需要在组件销毁时，取消window的事件监听，否则会影响其他页面的window监听
      this.clearScroll()
    },
    activated() {
      this.bindScroll()
    },
    deactivated() {
      this.clearScroll()
    },
  }
</script>


<style scoped>
  .loading {
    width: 1200px;
    text-align: center;
    margin: 0 auto;
    line-height: 50px;
    background: white;
    color: purple;
    border-radius: 5px;
  }
</style>